// pages/feedback/feedback.js
// 点击+添加图片事件
// 1 调用小程序内置的选择图片的api
// 2 获取图片的路径数组
// 3 把图片路径存到data的变量中
// 4 页面根据图片数组 进行循环显示 自定义组件

// 点击图片右上角删除
// 1 获取被点击的元素的索引
// 2 获取data中的数组
// 3 根据索引 删除数组中对应的元素
// 4 把数组重新设置回data中

// 点击“提交”
// 1 获取文本域的内容
// 2 对这些内容做合法性验证
// 3 验证通过用户选择的图片 上传到专门的图片的服务器 返回图片在外网的链接
// 4 文本域和外网图片路径一起提交到服务器 （此步骤只做前端模拟，不会真的发请求到后台，因为后台没做这个接口）
// 5 清空当前页面
// 6 返回上一页
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: '体验问题',
        isActive: true
      },
      {
        id: 1,
        value: '商品/商家投诉',
        isActive: false
      }
    ],
    // 被选中的图片数组
    chooseImgs: [],
    // 文本域内容
    textVal: ''
  },
  // 外网的图片的路径数组
  upLoadImgs: [],

  // 标题点击事件 从子组件传递过来
  handletabsItemChange(e) {
    // console.log(e);
    // 获取被点击的标题索引
    const { index } = e.detail;
    // 修改源数组
    let { tabs } = this.data;
    // 用foreach判断哪个索引被激活了
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    // 赋值到tabs上去
    this.setData({
      tabs: tabs
    })
  },

  // 点击+选择图片
  handleChooseImg() {
    // 调用小程序的选择图片的api
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        // console.log(res);
        this.setData({
          // 如果用户点击多次 那么就要让用户多次选择的图片追加到数组中 需要在这做个拼接
          chooseImgs: [...this.data.chooseImgs, ...res.tempFilePaths]
        })
      }
    })
  },

  // 点击删除上传的图片
  handleRemoveImg(e) {
    const { index } = e.currentTarget.dataset;
    let { chooseImgs } = this.data;
    chooseImgs.splice(index, 1);
    this.setData({
      chooseImgs
    })
  },

  // 文本域的输入事件
  handleTextInput(e) {
    let textVal = e.detail.value;
    this.setData({
      textVal
    })
  },

  // 提交事件
  handleFormSubmit() {
    // 1 获取文本域的内容 与图片数组
    let { textVal, chooseImgs } = this.data;
    // 2 合法性校验
    if (!textVal.trim()) {
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true,
      })
      return
    }
    wx.showLoading({
      title: '正在上传',
      mask: true,
    })
    // 判断有没有上传的图片数组
    if(this.upLoadImgs.length != 0) {
      // 3 准备上传图片到专门服务器
      // 这个uploadFile的api不支持多个文件同时上传 所以只能遍历数组 挨个上传
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          // 图片上传路径
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
          // 被上传的文件路径
          filePath: v,
          // 上传文件的名称 后台来获取文件 
          name: 'file',
          header: {},
          // 顺带的文本信息
          formData: {},
          success: function (res) {
            console.log(res);
            let url = JSON.parse(res.data);
            this.upLoadImgs.push(url);
            // 所有图片都上传完成了 判断i是不是等于上传图片数组的长度减一 是表明此时循环上传图片已经完成了
            if (i == this.upLoadImgs.length - 1) {
              wx.hideLoading();
              // 提交到后台 因无接口只做打印 不做真的提交到后台
              console.log('把文本内容和外网的图片数组 提交到后台中');
              // 提交成功 重置页面 然后返回上一页
              this.setData({
                textVal: '',
                upLoadImgs: []
              })
              wx.navigateBack({
                delta: 1,
              })
            }
          }
        })
      })
    } else {
      wx.hideLoading();
      console.log('上传到后台');
      wx.navigateBack({
        delta: 1,
      })
    }
  }
})